<template>
  <div>
    <el-card shadow="never" class="box-card box-card1">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <div>
        <el-row>
          <el-col :span="6">
            <span style="margin-right: 10px">订单编号</span
            ><el-input
              style="width: 250px"
              placeholder="请输入编号"
              v-model="orderSn"
              clearable
            >
            </el-input>
          </el-col>
          <el-col :span="6">
            <span style="margin-right: 10px">退单状态</span>
            <el-select v-model="status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-button @click="reset">重置</el-button>
            <el-button @click="search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card shadow="never" class="box-card box-card2">
      <div class="text item">
        <el-table :data="articleData" border style="width: 100%">
          <el-table-column align="center" label="序号" type="index" width="60">
          </el-table-column>
          <el-table-column
            align="center"
            prop="id"
            label="订单编号"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            width="100"
            prop="status"
            label="退单状态"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | status">{{
                scope.row.status | orderProcessText
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="description"
            label="描述"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="reason"
            label="退单原因"
          ></el-table-column>
          <el-table-column align="center" prop="productName" label="商品名称">
          </el-table-column>
          <el-table-column align="center" prop="productAttr" label="商品属性">
            <template slot-scope="scope">
              <span
                v-for="(item, index) in JSON.parse(scope.row.productAttr)"
                :key="index"
                > <span style="margin:0 5px">[{{ item.key }}:{{ item.value }}]</span> </span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="receiveMan" label="商家备注">
          </el-table-column>

          <el-table-column
            align="center"
            width="160px"
            prop="receiveTime"
            label="添加时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="操作"
            width="160"
          >
            <template slot-scope="scope">
              <el-button @click="edit(scope.row.id)" type="primary"
                ><i style="margin-right: 10px" class="el-icon-view"></i
                >查看订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        @limitfather="limitchange"
        @startfather="startchange"
        :totalNumber="totalnumber"
      ></pagination>
    </el-card>
  </div>
</template>

<script>
import backGoodsApi from "@/api/order/backGoods/index";
import pagination from "@/components/common/pagination";

export default {
  components: { pagination },

  data() {
    return {
      orderSn: "",
      status: "",
      productAttr: [],
      options: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "退货中",
        },
        {
          value: 2,
          label: "已完成",
        },
        {
          value: 3,
          label: "已拒绝",
        },
      ],
      value: "",
      articleData: [],
      totalnumber: 0,
      start: 1,
      limit: 10,
    };
  },
  filters: {
    orderProcessText(process) {
      var text = "等待处理";
      switch (JSON.stringify(process)) {
        case "0":
          text = "待处理";
          break;
        case "1":
          text = "退货中";
          break;
        case "2":
          text = "已完成";
          break;
        case "3":
          text = "已拒绝";
          break;

        default:
          break;
      }
      return text;
    },
    status(process) {
      var text = "";
      switch (JSON.stringify(process)) {
        case "0":
          text = "danger";
          break;
        case "1":
          text = "warning";
          break;
        case "2":
          text = "";
          break;
        case "3":
          text = "info";
          break;

        default:
          break;
      }
      return text;
    },
  },
  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 来自子组件切换limit
    limitchange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 来自子组件切换start
    startchange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    // 到新增文章页面
    toadd() {
      this.$router.push({ path: "/content/addArticle" });
    },
    // 重置
    reset() {
      this.start = 1;
      this.limit = 5;
      this.orderId = "";
      this.status = "";
      this.init();
    },
    // 搜索
    search() {
      this.start = 1;
      this.limit = 5;
      this.init();
    },
    // 获取数据
    init() {
      backGoodsApi
        .findReturnApply(this.start, this.limit, {
          orderSn: this.orderSn,
          status: this.status,
        })
        .then((res) => {
          console.log(res);
          if (res.success) {
            // res.data.rows.forEach((el) => {
            //   el.productAttr = JSON.parse(el.productAttr);
            // });
            this.articleData = res.data.rows;
            this.totalnumber = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 修改某一项
    edit(ids) {
      this.$router.push({
        name: "backDetail",
        query: {
          id: ids,
        },
      });
    },
    // 切换文章显示否
    switchShow(rows) {
      var temp = rows.isShow;
      console.log(rows);
      articleApi
        .changeShowStatus({
          id: rows.id,
          isShow: rows.isShow ? 1 : 0,
        })
        .then((res) => {
          console.log(res);
          if (res.success) {
            if (!rows.isShow) {
              this.$notify.success({
                title: "隐藏成功",
                showClose: true,
                duration: 2000,
              });
            } else {
              this.$notify.success({
                title: "显示成功",
                showClose: true,
                duration: 2000,
              });
            }
          } else {
            rows.isShow = !temp;
            this.$message.error(res.message);
          }
        });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    currentPage2(e) {
      console.log(e);
    },
  },

  computed: {},

  watch: {},
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 97%;
  margin: 15px auto;
}
</style>
